<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="bean.User" %>
<%@ page import="bean.News" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>时讯界新闻发布系统</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        body {
            background-color: #eaf6f6;
        }
        .container-fluid {
            display: flex;
            height: 100vh;
            padding: 0;
        }
        .sidebar {
            background-color: #333;
            color: white;
            padding-top: 20px;
            flex: 0 0 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }
        .sidebar a {
            color: white;
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            width: 100%;
            text-align: center;
        }
        .sidebar a:hover {
            background-color: #575757;
            text-decoration: none;
        }
        .sidebar a:hover, .sidebar .active {
            background-color: #575757;
            text-decoration: none;
        }
        .main-content {
            background-color: #eaf6f6;
            flex-grow: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
        }
        .user-info {
            text-align: center;
            padding: 20px 0;
        }
        .user-info img {
            width: 60px;
            border-radius: 50%;
        }
        .user-info p {
            margin: 10px 0 0;
        }
        .editor-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        #editor-text-area {
            flex-grow: 1;
            height: auto;
        }
    </style>
</head>
<body>
<% User user = (User) request.getSession().getAttribute("user");
    News news = (News) request.getSession().getAttribute("news");
    if (news != null) {
        // 将 news 对象设置为 request 属性，以便在页面中使用
        request.setAttribute("news", news);
        request.getSession().setAttribute("newid", news.getId());
        // 从 session 中移除 news 对象
        request.getSession().removeAttribute("news");
    }
%>
<div class="container-fluid">
    <div class="main-content">
        <div class="mt-1 editor-container">
            <form action="../news.do" method="post" style="flex-grow: 1; display: flex; flex-direction: column;">
                <div class="form-group">
                    <label for="newsTitle">新闻标题</label>
                    <c:if test="${news != null}">
                        <input type="text" class="form-control" id="newsTitle" name="newsTitle1"
                               placeholder="请输入新闻标题"
                               value="<c:out value='${news.title}'/>" required>
                    </c:if>
                    <c:if test="${news == null}">
                        <input type="text" class="form-control" id="newsTitle" name="newsTitle"
                               placeholder="请输入新闻标题"
                               required>
                    </c:if>
                </div>
                <div class="form-group" style="flex-grow: 1; display: flex; flex-direction: column;">
                    <label>新闻正文</label>
                    <div style="border: 1px solid #ccc; flex-grow: 1; display: flex; flex-direction: column;">
                        <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                        <div id="editor-text-area" style="flex-grow: 1;"></div>
                    </div>
                    <br/><input name="html" id="html" type="hidden">
                </div>
                <button type="submit" class="btn btn-primary mt-2">发布新闻</button>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>gEdi
    const E = window.wantor;
    var html;

    // 切换语言
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    window.editor = E.createEditor({
        selector: '#editor-text-area',
        html: '<c:out value="${news != null ? news.content : ''}" escapeXml="false"/>',
        config: {
            placeholder: '请输入新闻内容',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: "../newsimg.do",
                    withCredentials: true,
                    onSuccess(file, res) {
                        console.log('图片上传成功', file, res);
                    },
                    onFailed(file, res) {
                        console.log('图片上传失败', file, res);
                    }
                }
            },
            onChange(editor) {
                html = editor.getHtml();
                document.getElementById("html").value = html;
            }
        }
    });

    window.toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {}
    });

    function confirmLogout() {
        if (confirm("确认退出登录吗?")) {
            window.location.href = "login.jsp";
        }
        return false;
    }
</script>
</body>
</html>
